import React, { useEffect, useState } from 'react';
import {NavLink, useNavigate} from 'react-router-dom';
import style from './css/Films.module.css'
import { Button, Space, Swiper, Toast } from 'antd-mobile'//引入轮播一些的组件
import axios from 'axios';
function Films(){
    const [swiperList,setSwiperList]=useState([{"name":"碰磕"}])
    useEffect(()=>{
        axios({
            url:"https://m.maizuo.com/gateway?cityId=110100&pageNum=1&pageSize=10&type=1&k=2167550",
            headers:{
                "X-Host": "mall.film-ticket.film.list",
                "X-Client-Info": '{"a":"3000","ch":"1002","v":"5.2.0","e":"16550439241336542282907649","bc":"310100"}'
            }
        }).then(res=>{
            // console.log(res.data.data.films)
            setSwiperList(res.data.data.films);
            console.log(swiperList)
        })
    },[])
    // console.log(style);
    const navigate = useNavigate()
    return (
        <div>
            <Swiper autoplay style={{height:"200px"}}>
            {
                swiperList.map(item=><Swiper.Item key={item.name}><div style={{ backgroundImage: `url(${item.poster})`,height:"100%" }}>{item.name}</div></Swiper.Item>)
            }  
            </Swiper>
            Films
            <b onClick={goto404=>{
                // window.location.href="/404";//原生js
                // props.history.push("/404")//老版本写法
                navigate("/404")
            }} className={style.active}>去404页(编程式导航)</b>
            <NavLink to='/daili'>反向代理获取数据</NavLink>
        </div>
    );
}

export default Films